<template>
    <div class="bj">
        <div class="layer1"></div>
        <div class="layer2"></div>
        <div class="layer3"></div>
        <div class="layer4"></div>
        <div class="layer5"></div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
$size: 3px;
$count: 500;
$time: 1000;

.bj {
    width: 100vw;
    height: 100vh;
    background-color: black;
    position: relative;
}



@function getShow($n) {
    $shadow: unquote('#{random(100)}vw') unquote('#{random(100)}vh') #fff;

    @for $i from 2 through $n {
        $shadow: '#{$shadow}' + ',' + '#{unquote('#{random(100)}vw') unquote('#{random(100)}vh') #fff}'
    }

    @return unquote($string: $shadow)
}

@keyframes moveUp {
    100% {
        transform: translateY(-100vh);
    }
}

@for $i from 1 through 5 {
    $size: #{$i}px;
    $count: floor($number: $count/2);
    $time: floor($number: $time/2);

    .layer#{$i} {
        position: absolute;
        width: $size;
        height: $size;
        top: 0;
        left: 0;
        border-radius: $size;
        background-color: white;
        box-shadow: 10px 10px #fff, 15px 15px #fff;
        box-shadow: getShow($count);
        animation: moveUp #{$time}s linear infinite;

        // 利用为元素
        &::after {
            content: '';
            position: fixed;
            left: 0;
            top: 100vh;
            width: $size;
            height: $size;
            border-radius: inherit;
            box-shadow: inherit;
        }
    }
}
</style>